<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的jquery进度条</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
var i=0;
    /*add——创建tbx下的div加文字和变宽度的方法*/
    function add(i){
		    var tbox =$(".tbox");
            var tiao =$(".tiao");
			tiao.css("width",i+"%").html(i+"%");
		}

    /*创建方法（i++循环起来）*/
	function xh(){
		if(i>100){
			$(".ok").html("加载完成").fadeIn("slow");
			return;
		}
		if(i<=100){
			setTimeout("xh()",100)
			add(i);
		    i++;
		}
	}
    /*调用xh()函数*/
$(document).ready(function(){	
		xh();
	
	});
</script>
<style>
.box{width:397px; height:300px; margin:30px auto; }
.ok{width:200px; height:100px; margin:0 auto; text-align:center; background:#999; line-height:100px; color:#FFF; display:none; }
.tbox{width:397px; height:49px; background:url(bak.png) no-repeat; margin-top:20px;}
.tbox div{width:0px; height:49px; background:url(pro.png) no-repeat; text-align:center;
font-family:Tahoma; font-size:18px; line-height:48px;}
</style>
<div class="box">
    <div class="ok"></div>
    <div class="tbox">
        <div class="tiao"></div>
    </div>
</div>
</body>
</html>
